<template>
	<div class="statistical-status-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-form :inline="true" :model="query" size="mini">
				<el-form-item label-width="100px" label="单位名称：">
					<el-cascader :options="organData" :props="elselectSingle" ref="refelOrgan" clearable placeholder="请选择..." />
				</el-form-item>
				<el-form-item label-width="100px" label="时间类型：">
					<el-radio-group v-model="query.cType">
						<el-radio-button :label="1">登记时间</el-radio-button>
						<el-radio-button :label="2">提取时间</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label-width="100px" label="时间值：">
					<el-date-picker
						v-model="query.cTimeAll"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						type="daterange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item style="margin-left: 20px">
					<el-button type="primary" @click="statistics" icon="el-icon-search" size="small">查询</el-button>
					<el-button type="success" plain @click="onExportExcel" icon="el-icon-document" size="small">导出</el-button>
				</el-form-item>
			</el-form>
			<div id="tableExcel">
				<el-table
					ref="singleTableRef"
					:data="tableData"
					:default-sort="{ prop: 'organName', order: 'descending' }"
					:row-style="{ height: '40px' }"
					:cell-style="{ padding: '0' }"
					size="medium"
					style="width: 100%"
					highlight-current-row
					:row-class-name="tableRowClassName"
					@current-change="handleCurrentChange"
				>
					<el-table-column align="center" label="序号" type="index" width="60" />
					<el-table-column align="center" property="organName" sortable prop="organName" label="单位名称" />
					<el-table-column align="center" property="register" sortable label="已登记" show-overflow-tooltip />
					<el-table-column align="center" property="warehoused" sortable label="已入库" show-overflow-tooltip />
					<el-table-column align="center" property="seconded" sortable label="已借调" show-overflow-tooltip />
					<el-table-column align="center" property="returned" sortable label="已发还" show-overflow-tooltip />
					<el-table-column align="center" property="destroyed" sortable label="已销毁" show-overflow-tooltip />
					<el-table-column align="center" property="handedOver" sortable label="已移交" show-overflow-tooltip />
					<el-table-column align="center" property="back" sortable label="已回库" show-overflow-tooltip />
					<el-table-column align="center" property="issued" sortable label="其他出库" show-overflow-tooltip />
					<el-table-column align="center" property="inAll" sortable label="入库合计" show-overflow-tooltip />
					<el-table-column align="center" property="outAll" sortable label="出库合计" show-overflow-tooltip />
				</el-table>
			</div>
			<div style="height: 40px"></div>
			<Chart ref="refChart" />
		</el-card>
		<Evidencelist ref="refEviRef" />
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive } from 'vue';
import Chart from './component/chart.vue';
import Evidencelist from '/@/views/statistical/common/evidencelist.vue';
import { getOrganTree, statisticsEvidenceStatus } from '/@/api/statistics/index';
import type { ElTable } from 'element-plus';
import { exportExcel } from '/@/common/excel';

export default {
	name: 'statisticalStatus',
	components: { Chart, Evidencelist },
	setup() {
		const elselectSingle = {
			checkStrictly: true,
		};

		const state = reactive({
			organData: [],
			selectTableData: [],
			query: {
				cType: 1,
				cTimeStart: null,
				cTimeEnd: null,
				cTimeAll: null,
				currentOrganId: 0,
			},
			tableData: [],
		});

		const refEviRef = ref();
		const refChart = ref();
		const refelOrgan = ref();
		const currentRow = ref();
		const singleTableRef = ref<InstanceType<typeof ElTable>>();

		const setCurrent = (row?: User) => {
			singleTableRef.value!.setCurrentRow(row);
		};
		const handleCurrentChange = (val: User | undefined) => {
			currentRow.value = val;
			refChart.value.echartInit(val);
		};

		async function init() {
			await getOrganTree(state.query).then((res: any) => {
				if (res.success) {
					state.organData = [res.data];
					statistics();
				}
			});
		}

		async function statistics() {
			state.query.currentOrganId = 0;
			if (refelOrgan.value.getCheckedNodes().length > 0) {
				state.query.currentOrganId = Number(refelOrgan.value.getCheckedNodes()[0].value);
			}

			state.query.cTimeStart = null;
			state.query.cTimeEnd = null;
			if (state.query.cTimeAll && state.query.cTimeAll.length > 1) {
				state.query.cTimeStart = state.query.cTimeAll[0];
				state.query.cTimeEnd = state.query.cTimeAll[1];
			}

			await statisticsEvidenceStatus(state.query).then((res: any) => {
				if (res.success) {
					state.tableData = res.data;
					if (state.tableData.length > 0) {
						setCurrent(state.tableData[0]);
						refChart.value.echartInit(state.tableData[0]);
					}
				}
			});
		}

		const onExportExcel = () => {
			debugger;
			exportExcel('tableExcel', '物品状态统计', '物品状态统计列表.xlsx');
		};

		const onEivListInfo = (row: any) => {
			refEviRef.value.openDialog();
		};

		init();

		return {
			init,
			statistics,
			onExportExcel,
			elselectSingle,
			refEviRef,
			refelOrgan,
			onEivListInfo,
			setCurrent,
			singleTableRef,
			refChart,
			handleCurrentChange,
			...toRefs(state),
		};
	},
};
</script>
